<template>
  <div v-swiper:mySwiper="swiperOption" class="myswiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="img.src" v-for="img in imgs">
        <nuxt-link :to="img.link | goodsUrl" v-if="img.link">
          <img :src="img.src | formatSrc" :alt="img.title" />
        </nuxt-link>
        <img v-else :src="img.src | formatSrc" :alt="img.title" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    imgs: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    swiperOption: {
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      }
    }
  })
};
</script>
<style lang="scss" scoped>
.myswiper {
  background: #fff;
  height: 375px;
  img {
    height: 375px;
  }
}
</style>
